<!-- 搜索组件 -->
<template>
  <div class="dynamic-search-component">
    <el-form
      ref="queryForm"
      :inline="true"
      label-width="auto"
      v-show="showSearch"
      :class="{floatRight: isFloatRight}"
    >
      <hamburger
        :isActive="hamgurgerActive"
        id="hamburger-org"
        class="hamburger-container"
        @toggleClick="toggleSideBar"
        v-if="hamgurgerActive != undefined"
      ></hamburger>
      <el-form-item
        style="margin-bottom: 0px; margin-left: 0px;"
        v-for="(item, index) in searchData"
        :label="item.ctConDisp? item.ctColTitle: ''"
        v-bind:key="index"
        :class="{displaySearch: !item.ctConDisp}"
        v-show="searchItemDisp(item)"
      >
        <component
          :class="{displaySearch: !item.ctConDisp}"
          v-show="searchItemDisp(item)"
          :is="item.ctConType"
          v-model="item.ctColDefaultv"
          :misTreeType="item.ctConTreetype"
          @updateSelectTreeVal="updateSelectTreeVal(arguments, item)"
          :disableBranchNodes="item.ctColName != 'ct_branch_level' && item.disableBranchNodes"
          :setValue="item.ctColDefaultv"
          clearable
          size="small"
          :title="item.ctColName == 'includeFlag'?checkTitle:''"
          value-format="yyyy-MM-dd"
          @keydown.enter.native="handleQuery"
          :style="{width:(item.ctConType=='mis-select-tree'?null:(item.ctConSpan?item.ctConSpan:130)+'px')}"
        ></component>
      </el-form-item>
      <el-form-item style="margin-bottom: 0px;margin-right:0px;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import MisSelectTree from '@/components/SpsPublic/treeview/MisSelectTree'
import Hamburger from '@/components/Hamburger'

export default {
  components: {
    MisSelectTree,
    Hamburger,
  },
  name: 'dynamicSearch',
  props: {
    // 组件需要获取的值
    searchData: {
      type: Array,
      default: () => {
        return []
      },
    },
    hamgurgerActive: {
      type: Boolean,
      default: () => {
        return undefined
      },
    },
    isFloatRight: {
      type: Boolean,
      default: () => {
        return true
      },
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 下拉树活动类别
      ctHdlb: null,
      misSelect: 'misSelect',
      checkTitle: '包含下级',
      disableBranchNode: false,
    }
  },
  methods: {
    searchItemDisp(item) {
      const needHide =
        item.ctColName == 'ct_branch_level' || item.ctColName == 'includeFlag'
      // // //debugger
      const flag =
        (item.ctConDisp && !needHide) || (needHide && !this.hamgurgerActive)
      return flag
    },
    // 点击显示orgTree树方法
    toggleSideBar() {
      this.$emit('switchOrgTree')
    },
    // 更新下拉树选择的值
    updateSelectTreeVal(args, item) {
      item.ctColDefaultv = args[0]
    },
    // 向父组件传递数据
    postForm() {
      var obj = {}
      for (var i = 0; i < this.searchData.length; i++) {
        obj[this.searchData[i].ctColName] = this.searchData[i].ctColDefaultv
      }
      this.$emit('postForm', obj)
    },
    // 查询按钮事件
    handleQuery() {
      this.postForm()
    },
    // 重置按钮事件
    handleReset() {
      this.$emit('resetSearch')
    },
  },
}
</script>

<style lang="scss" scope>
.dynamic-search-component {
  // margin:5px 0px 5px 5px;
  .el-checkbox {
    width: 12px !important;
  }
  .displaySearch {
    display: none !important;
  }
}
#hamburger-org {
  float: left;
  cursor: pointer;
  padding: 8px 0px 0px 0px !important;
  margin: 0px 0px 0px -24px;
}
.floatRight {
  float: right;
}
.dynamic-search-component .el-form-item__label-wrap {
  margin-left: 0px !important;
}
</style>
